<template>
  <div class="wrapper">
    <img :src="shopInfo.imgUrl">
    <div class="font">
      <h2>{{ shopInfo.name }}</h2>
      <p>{{shopInfo.startPrice}}￥起送|{{shopInfo.deliveryPrice}}￥配送</p>
      <p>{{ shopInfo.description }}</p>
    </div>
  </div>
</template>

<script setup>
import {defineProps, onBeforeMount, ref} from "vue";
import {getShopById} from "@/utils/api/ShopManager";
const props = defineProps(['shopId']);
// eslint-disable-next-line vue/no-setup-props-destructure
const {shopId} = props
// 获得shop信息
const shopInfo = ref({})
onBeforeMount(async ()=>{
  const res = await getShopById({id:shopId})
  shopInfo.value = res.data
})

</script>

<style scoped>
.wrapper {
  position: relative;
  top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.wrapper img {
  height: 7rem;
  width: 10rem;
}
.wrapper .font {

}
.wrapper .font h2 {
  line-height: 30px;
  margin: 5px 0;
}
.wrapper .font p {
  font-size: 5px;
  text-align: center;
}
</style>